<template>
  <el-dialog
      top="5vh"
      width="1200px"
      title="订单详情"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <div class="order-detail">
      <!-- 订单基本信息 -->
      <el-card class="order-info" shadow="never">
        <div slot="header">
          <span>订单基本信息</span>
        </div>
        <el-descriptions :column="3" border>
          <el-descriptions-item label="订单号">{{ currentOrder.order_no }}</el-descriptions-item>
          <el-descriptions-item label="用户ID">{{ currentOrder.user_id }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag v-if="currentOrder.status === 'pending_pricing'" type="info">待定价</el-tag>
            <el-tag v-else-if="currentOrder.status === 'pending'" type="warning">待支付</el-tag>
            <el-tag v-else-if="currentOrder.status === 'paid'" type="primary">已支付</el-tag>
            <el-tag v-else-if="currentOrder.status === 'refunding'" type="warning">退款中</el-tag>
            <el-tag v-else-if="currentOrder.status === 'shipped'" type="success">已发货</el-tag>
            <el-tag v-else-if="currentOrder.status === 'refunded'" type="danger">已退款</el-tag>
            <el-tag v-else-if="currentOrder.status === 'completed'" type="success">已完成</el-tag>
            <el-tag v-else-if="currentOrder.status === 'cancelled'" type="info">已取消</el-tag>
            <el-tag v-else-if="currentOrder.status === 'pending_receipt'" type="warning">待收货</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="收货人">{{ currentOrder.address_nickname }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentOrder.address_phone }}</el-descriptions-item>
          <el-descriptions-item label="配送方式">
            <el-tag v-if="currentOrder.order_delivery === 'express'" type="primary">快递</el-tag>
            <el-tag v-else-if="currentOrder.order_delivery === 'self_pickup'" type="warning">自提</el-tag>
            <el-tag v-else-if="currentOrder.order_delivery === 'no_delivery'" type="info">虚拟商品</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="收货地址" :span="3">{{ currentOrder.address_detail }}</el-descriptions-item>
          <el-descriptions-item label="订单备注" :span="3">{{ currentOrder.remark || '无' }}</el-descriptions-item>
          <el-descriptions-item label="商品数量">{{ currentOrder.count }}</el-descriptions-item>
          <el-descriptions-item label="订单金额">¥{{ currentOrder.amount }}</el-descriptions-item>
          <el-descriptions-item label="支付金额">¥{{ currentOrder.payment_amount }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ currentOrder.payment_type || '未支付' }}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{ formatDateTime(currentOrder.payment_time) || '未支付' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatDateTime(currentOrder.create_time) }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 物流信息 -->
      <el-card class="logistics-info" shadow="never" v-if="currentOrder.order_delivery === 'express'">
        <div slot="header">
          <span>物流信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="快递公司">{{ currentOrder.express_company || '未填写' }}</el-descriptions-item>
          <el-descriptions-item label="快递单号">{{ currentOrder.express_no || '未填写' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 退款信息 -->
      <el-card class="refund-info" shadow="never" v-if="currentOrder.refund_status !== -1">
        <div slot="header">
          <span>退款信息</span>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="退款状态">
            <el-tag v-if="currentOrder.refund_status === 0" type="warning">退款中</el-tag>
            <el-tag v-else-if="currentOrder.refund_status === 1" type="success">退款成功</el-tag>
            <el-tag v-else-if="currentOrder.refund_status === 2" type="danger">退款失败</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="退款金额">¥{{ currentOrder.refund_amount }}</el-descriptions-item>
          <el-descriptions-item label="退款原因">{{ currentOrder.refund_reason || '无' }}</el-descriptions-item>
          <el-descriptions-item label="退款备注">{{ currentOrder.refund_remark || '无' }}</el-descriptions-item>
          <el-descriptions-item label="申请退款时间">{{ formatDateTime(currentOrder.refund_time) || '无' }}</el-descriptions-item>
          <el-descriptions-item label="退款成功时间">{{ formatDateTime(currentOrder.refund_success_time) || '无' }}</el-descriptions-item>
          <el-descriptions-item label="退款单号">{{ currentOrder.refund_no || '无' }}</el-descriptions-item>
          <el-descriptions-item label="退款交易号">{{ currentOrder.refund_transaction_id || '无' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 订单商品 -->
      <el-card class="order-items" shadow="never">
        <div slot="header">
          <span>订单商品</span>
        </div>
        <el-table
            :data="orderItems"
            border
            stripe
            v-loading="itemsLoading"
        >
          <el-table-column prop="id" label="ID" width="80"/>
          <el-table-column prop="product_cover" label="商品图片" width="100">
            <template slot-scope="scope">
              <el-image
                  :preview-src-list="[scope.row.product_cover]"
                  style="width: 80px; height: 80px"
                  :src="scope.row.product_cover" fit="cover">
                <template #error>
                  <img src="@/assets/file.png" alt="" style="width: 80px; height: 80px">
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="product_name" label="商品名称" min-width="200"/>
          <el-table-column prop="sku_spec" label="规格信息" width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.sku_spec">
                <el-tag 
                  v-for="(value, key) in parseSkuSpec(scope.row.sku_spec)" 
                  :key="key"
                  size="mini"
                  style="margin-right: 5px; margin-bottom: 5px;"
                >
                  {{ key }}: {{ value }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" width="80"/>
          <el-table-column prop="total_amount" label="小计" width="120">
            <template slot-scope="scope">
              ¥{{ scope.row.total_amount }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-dialog>
</template>

<script>
import {http} from '@/api'

export default {
  name: 'OrderDetail',
  data() {
    return {
      dialogValue: false,
      currentOrder: {},
      orderItems: [],
      itemsLoading: false
    }
  },
  methods: {
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      return new Date(dateTime).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    parseSkuSpec(skuSpec) {
      if (!skuSpec) return {};
      try {
        return JSON.parse(skuSpec);
      } catch (e) {
        return {};
      }
    },
    open(row) {
      this.currentOrder = row;
      this.dialogValue = true;
      this.loadOrderItems();
    },
    loadOrderItems() {
      this.itemsLoading = true;
      http.orderItem.list({ order_id: this.currentOrder.id }).then(res => {
        this.orderItems = res.data;
        this.itemsLoading = false;
      }).catch(() => {
        this.itemsLoading = false;
      });
    }
  }
}
</script>

<style scoped lang="scss">
.order-detail {
  .order-info {
    margin-bottom: 20px;
  }
  .logistics-info {
    margin-bottom: 20px;
  }
  .refund-info {
    margin-bottom: 20px;
  }
  .order-items {
    margin-bottom: 20px;
  }
}
</style> 